<template>
  <div class="deInfo" v-if="Object.keys(detailGoodsInfo).length !==0 ">
    <h3>{{detailGoodsInfo.title}}</h3>
    <div class="dePrice">
      <span class="price">{{detailGoodsInfo.price}}</span>
      <span class="prePrice">{{detailGoodsInfo.highPrice | rmb}}</span>
      <span class="discountDesc" v-if="discountDesc" :style="{'backgroundColor': detailGoodsInfo.discountBgColor}">{{detailGoodsInfo.discountDesc}}</span>
    </div>
    <div class="deFeature">
      <span v-for="item in (clumns !== undefined && clumns.length-1)" :key="item">{{clumns[item-1]}}</span>
      <span><img :src="services.icon" alt="">
        {{services.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailInfo",
  props: {
    detailGoodsInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    services() {
      return this.detailGoodsInfo.services !== undefined && this.detailGoodsInfo.services.slice(-1)[0]
    },
    clumns() {
        return  this.detailGoodsInfo.columns;
		},
		discountDesc(){
			return this.detailGoodsInfo.discountDesc !== ''  ? true  : false
		}
  }
};
</script>

<style scoped>
.deInfo {
  padding: 10px 6px;
	border-bottom: 2px solid #ccc;
}
.deInfo h3 {
  line-height: 22px;
  font-size: 16px;
  text-indent: 16px;
}
.dePrice {
  position: relative;
  height: 50px;
  line-height: 45px;
}
.dePrice .price {
  font-size: 20px;
  color: var(--color-high-text);
}
.dePrice .prePrice {
  font-size: 12px;
  text-decoration: line-through;
  color: #ccc;
}
.dePrice .discountDesc {
  position: absolute;
  padding: 2px 4px;
  line-height: 12px;
  height: 16px;
  top: 10px;
  border-radius: 12px;
  font-size: 12px;
  background-color: var(--color-high-text);
}
.deFeature {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.deFeature span {
  flex: 1;
}
.deFeature span:nth-child(1) {
  text-align: left;
}
.deFeature span:nth-child(2) {
  text-align: center;
}
.deFeature span:nth-child(3) {
  position: relative;
  text-align: right;
}
.deFeature span:nth-child(3) >img {
  width: 14px;
  height: 14px;
  vertical-align:text-bottom;
}
</style>
